import * as React from 'react';
import { Form, DatePicker, Select } from '@teamix/ui';
import { YunxiaoIcon, ButtonIcon } from '@alife/devops-ui';
import dayjs from 'dayjs';
import MemberTrigger from 'components/memberTrigger';
import Popup from 'components/popup';
import intl from '../../../../../../../../../../../locale';

const { RangePicker } = DatePicker;
const formItemLayout = {
  labelCol: {
    span: 6,
  },

  wrapperCol: {
    fixedSpan: 12,
  },
};

const operationTypeList = [
  {
    value: 'REPO_OPERATION',
    label: intl.get({
      id: 'code-assets.sensitiveBehaviorMonitor.recordTable.filter.DatabaseOperations',
      defaultMessage: '库操作',
    }),
  },

  {
    value: 'AUTHORITY_CHANGE',
    label: intl.get({
      id: 'code-assets.sensitiveBehaviorMonitor.recordTable.filter.PermissionChange',
      defaultMessage: '权限变更',
    }),
  },
];

export default class FilterForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      memberData: [],
    };
  }

  updateTableParams = (obj) => {
    const tableParams = { ...this.props.tableParams, ...obj };
    this.props.updateTableParams(tableParams);
  };

  onResetClick = () => {
    this.setState({
      memberData: [],
    });

    this.props.updateTableParams({});
  };

  render() {
    const { tableParams } = this.props;
    return (
      <Popup
        size="large"
        trigger={<ButtonIcon text name="filter-line" />}
        triggerType="click"
        placement="br"
        footer={
          <Form.Item style={{ marginBottom: 0 }}>
            <Form.Reset
              text
              type="primary"
              style={{ border: 0 }}
              onClick={this.onResetClick}
              toDefault
            >
              <YunxiaoIcon type="delete-line" />{' '}
              {intl.get({
                id: 'code-assets.sensitiveBehaviorMonitor.recordTable.filter.ClearAllFilterConditions',
                defaultMessage: '清除所有筛选条件',
              })}
            </Form.Reset>
          </Form.Item>
        }
      >
        <Form {...formItemLayout} labelTextAlign="left">
          <Form.Item
            label={intl.get({
              id: 'code-assets.sensitiveBehaviorMonitor.recordTable.filter.OperationType',
              defaultMessage: '操作类型',
            })}
          >
            <Select
              mode="multiple"
              followTrigger
              dataSource={operationTypeList}
              value={tableParams.parent_operation_type_list || []}
              onChange={(value) => {
                this.updateTableParams({
                  parent_operation_type_list: value,
                });
              }}
            />
          </Form.Item>
          <Form.Item
            label={intl.get({
              id: 'code-assets.sensitiveBehaviorMonitor.recordTable.filter.Operator',
              defaultMessage: '操作人',
            })}
          >
            <div
              className="record-table-filter-operator"
              ref={(o) => {
                this.opcontainer = o;
              }}
            >
              <MemberTrigger
                // onChange={this.onMemberChange}
                onChange={(users) => {
                  this.setState({
                    memberData: users,
                  });

                  const author_id = users.map((item) => item._userId);
                  this.updateTableParams({ author_id });
                }}
                // value={this.props.tableParams.author_id ? this.props.tableParams.author_id.map(item => ({_userId: item})) : []}
                value={this.state.memberData}
                container={() => this.opcontainer}
                multiple
                isInviteUrl
              />
            </div>
          </Form.Item>
          <Form.Item
            label={intl.get({
              id: 'code-assets.sensitiveBehaviorMonitor.recordTable.filter.NotificationTime',
              defaultMessage: '通知时间',
            })}
          >
            <RangePicker
              followTrigger
              popupAlign="tr br"
              defaultValue={[tableParams.start_time, tableParams.end_time] || []}
              // onOk={this.onRangePickerOk}
              onOk={(value) => {
                this.updateTableParams({
                  start_time: dayjs(value[0]).format('YYYY-MM-DD'),
                  end_time: dayjs(value[1]).format('YYYY-MM-DD'),
                });
              }}
            />
          </Form.Item>
        </Form>
      </Popup>
    );
  }
}
